<template>
  <div class="project">
      <div class="common-bg"></div>
      <div class="outer-container">
          <table>
              <thead>
                  <th class="fst-class">一级分类</th>
                  <th class="scd-class">二级分类</th>
                  <th class="trd-class">项目名</th>
              </thead>
          </table>

          <table 
            v-for="(category,index) in category_list" 
            :key="index">
              <tbody class="gray-border">
                  <tr v-for="(scd_category,scd_index) in category.snd_category" :key="scd_category.id">
                    <td class="fst-class " v-if="scd_index == 0" :rowspan="scd_index == 0? category_list[index].snd_category.length:0">
                        <img src="../../../static/img/icon_diary.png" alt="">
                        <p>{{ category.name}}</p>
                    </td>
                    <td class="scd-class gray-left-border gray-bottom-border">{{ scd_category.name }}</td>
                    <td class="trd-class gray-left-border orange-color gray-bottom-border">
                        <router-link 
                        v-for="trd_category in scd_category.trd_category"
                        :key="trd_category.id"
                        to=''>{{ trd_category.name }}</router-link>
                    </td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</template>
<script>
    import { mapState,mapMutations } from 'vuex';
    export default{
        computed:mapState(['category_list']),
        created(){
            this.getPlasticlist();
        },
        methods: {
            ...mapMutations(['getPlasticlist']),
        }
    }
</script>

<style lang="less" scoped>
    .project{
        .common-bg{
            width: 100%;
            height: 400px;
            position: absolute;
            z-index: -1;
            top: 0;left: 0;
        }
        .outer-container{
            margin-top: 100px;
        }
        table{
            border-collapse:collapse;
            width: 100%;
            &:not(:nth-child(1)){
                margin-bottom: 50px;
            }
            .fst-class,.scd-class{
                width: 20%;
            }
            img{
                width: 20px;
                vertical-align: middle;
            }
            p{
                font-size: 16px;
                line-height: 1;
                margin-bottom: 10px;
            }
            thead{
                line-height: 60px;
                .fst-class{
                    background-color: #ffef68;
                }
                th{
                    font-weight: normal;
                    font-size: 16px;
                }
                .scd-class{
                    background-color: #f5d140;
                }
                .trd-class{
                    background-color: #f2b615;
                }
            }
            tbody{
                background: white;
                td{
                    font-weight: normal;
                    &.fst-class{
                        text-align: center;
                    }
                    &.scd-class{
                        padding-left: 7%;
                    }
                    &.trd-class{
                        padding-left: 4%;
                    }
                    line-height: 38px;
                    a{
                        display: inline-block;
                        min-width: 120px;
                        margin-left: 10px;
                    }
                }
            }
        }
    }
</style>

